import React, { Component } from 'react'
import { httpGet } from '../../services/http'
import Header from '../../components/Header/Header'
import Footer from '../../components/Footer/Footer'
import DetailView from './DetailView/DetailView'

// TODO 从Home跳转到这里 因为是两个组件 这两个组件跳转时都会重新 挂载卸载Header与Footer组件 感觉这样并不好
// TODO 现在不知道如何才能解决  使用布局(layout)的方法吗? 类似于umi的处理方式
class GoodsDetail extends Component {
  state = { detail: null }

  async componentDidMount () {
    const { gid } = this.props.match.params
    const [res, err] = await httpGet({ url: '/goods/detail', params: { gid } })
    if (res) {
      this.setState({
        detail: res.data[0]
      })
    } else {
      console.log(err)
    }
  }

  render () {
    const { detail } = this.state
    return (
      detail &&
      <div>
        <Header />
        <DetailView detail = {detail} />
        <Footer />
      </div>
    )
  }
}

export default GoodsDetail
